<script setup lang='ts'>
import { ref, onMounted, reactive } from "vue";
import { getFileList, deleteFile, uploadFile } from '@/api/message';
import { message } from '@/utils/message';
import { mainUrl } from "@/api/utils";
const fileData = ref([]);
const pagin = reactive({
  count: 10,
  page: 1,
  key: '',
  user_type: 1
});
const total = ref(10)
onMounted(() => {
  getList()
})
const getList = async () => {
  let res = await getFileList(pagin);
  console.log('附件', res);
  fileData.value = res.data.data;
  total.value = res.data.count
}
const handleCurrentPageChange = async newPage => {
  pagin.page = newPage;
  getList()
};
const handlePageSizeChange = async newSize => {
  pagin.count = newSize;
  getList()
};
const deletefile = async (id) => {
  let res = await deleteFile(id);
  if (res.data.code == 200) {
    getList();
    message('删除成功', { type: 'success' });
  }
}
//复制
const copyIt = (id) => {
  let input = document.createElement('input');
  input.value = `${mainUrl}/v1/attachment/get_attachment?aid=${id}`;
  document.body.appendChild(input);
  input.select();
  document.execCommand('Copy');
  document.body.removeChild(input);
  message('复制成功', { type: 'success' });
}
//查看文件
const file_dialog = ref(false);
const file_url = ref('')
const LookIt = (id, file) => {
  const isImage = /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file);
  if (isImage) {
    file_url.value = `${mainUrl}/v1/attachment/get_attachment?aid=${id}`;
  } else {
    message("这不是一个图片文件", {
      type: "error"
    })
  }
  file_dialog.value = isImage;
}
//上传
const loading=ref(false)
const selectedFileName = ref(null);
const onFileSelected=(event)=> {
  const file = event.target.files[0];
  if (file) {
    selectedFileName.value = file.name; // 显示文件名
     loading.value=true;
    uploadFile({file:file}).then((res)=>{
     
      if(res.data.code==200){
        message('上传成功', { type: 'success' });
        loading.value=false;
        selectedFileName.value = null;
        getList()
      }
    })
  } else {
    selectedFileName.value = null; // 如果用户取消选择，清空文件名
  }
}
//搜索附件
const findIt=()=>{
  getList()
}
</script>

<template>
  <div>
    <div class="table_box">
      <el-table class="table_el" :data="fileData" style="width: auto">
        <!-- <el-table-column label="文件名" prop="title" show-overflow-tooltip /> -->
        <el-table-column label="文件名" show-overflow-tooltip>
          <template #default="scope">
            <span class="file_name" @click="LookIt(scope.row.attachment_id, scope.row.title)">{{ scope.row.title
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件路径" prop="path" show-overflow-tooltip />
        <el-table-column label="创建时间" prop="created_at" show-overflow-tooltip />
        <el-table-column width="200">
          <template #header>
            <el-input v-model="pagin.key"  size="small" placeholder="关键字筛选" @blur="findIt" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="copyIt(scope.row.attachment_id)">复制</el-button>
            <el-button type="primary" plain size="small">
              <a :href="`${mainUrl}/v1/attachment/get_attachment?aid=${scope.row.attachment_id}`" download>下载</a>
            </el-button>
            <el-button size="small" type="danger" plain @click="deletefile(scope.row.attachment_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination background layout="prev, pager, next,sizes" :total="total" :current-page="pagin.page"
        :page-size="pagin.count" @update:current-page="handleCurrentPageChange" @update:page-size="handlePageSizeChange"
        :page-sizes="[10,20,50,100]" />
    </div>
    <div v-loading="loading">
      <el-button class="btn" type="primary" plain style="margin-top:20px"
        @click="$refs.fileInput.click()">上传附件</el-button>
      <input type="file" ref="fileInput" @change="onFileSelected" style="display:none" />
      <span v-if="selectedFileName" class="file-name">{{ selectedFileName }}</span>
    </div>

    <el-dialog title='文件查看' v-model="file_dialog" style="width: 50%">
      <img :src="file_url" style="margin: 0 auto" />
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>
.foot {
  display: flex;
  background-color: white;
  align-items: center;

  .el-pagination {
    margin: 10px;
  }
}
.file_name{
  cursor: pointer;
}
.file_name:hover{
color:#409EFF;
}
</style>
